<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .box{
                  width: 100px;
                  height: 100px;
                  background: yellowgreen;
                  position: absolute;
            }

      </style>
</head>
<body>

      <button id="btn">点击开始动画</button>
      <button id="stop">终止动画</button>

      <div class="box"></div>

      <script src="./jquery.js"></script>
      <script>
            // 动画 | 过渡;

            // 简单动画; show fade slide   
            // 目的 : 让元素显示或者隐藏;

            // show , hide 动画是一组比较特殊的动画, 如果不出传递过渡时间，那么这个时候我们只会单纯的控制显示隐藏;

            // $("#btn").on("click" , function(){
            //       $(".box").hide();
            // })

            // $("#btn").on("click" , function(){
            //       // slow fast normal
            //       // ms
            //       // showhide动画;
            //       // $(".box").hide(5000);
            //       // 淡入淡出;
            //       // $(".box").fadeOut(5000);
            //       // 改变透明度到0.3 
            //       // $(".box").fadeTo(2000,0.3);
            //       // 滑动;
            //       // $(".box").slideUp( 2000 );

            //       // toggle 类动画;
            //       // $(".box").toggle(5000);
            //       // fadeToggle , slideToggle;
            // })

            // $("#btn").on("click" , function(){
            //       // 回调函数;
            //       //     $(".box").fadeOut(2000 , function(){
            //       //           // 回调函数 : 动画执行结束会执行回调函数;
            //       //           alert("动画执行结束");
            //       //     })

            //       // 递归执行动画;
            //       $(".box").fadeOut(2000 , function(){
            //             // arguments.callee 就是当前的函数;
            //             $(".box").fadeToggle( 2000 , arguments.callee)
            //       })
            // })

            // 自定义动画;
            // obj => 存储运动目标点的对象;
            // obj => key : 属性名; width :
            // obj => value : 属性目标点   200
            // animate( obj )
            
            // $("#btn").on("click" , function(){
            //       $(".box").animate({
            //             width : 200
            //       } , 5000 , function(){
            //             console.log("hello world")
            //       })
            // })

            // 很多动画集合在一起，有顺序的执行;
            // 动画队列;

            // $("#btn").click( function(){
            //       // $(".box").animate({
            //       //       left : 200
            //       // } , 1000 , function(){
            //       //       // 动画的回调函数里 , this 指向的是当前发生动画的元素;
            //       //       $(this).animate({
            //       //             top : 200
            //       //       }, 1000 ,function(){

            //       //       })
            //       // })
            //       // 改写 : 
                  
            //       // jQuery会把所有的动画放在一个队列之中,上一个动画执行结束才会执行下一个动画;
                  
            //       // [ {left : 200 , timing : 1000 } , { top : 200 , timer : 1000 } ] 
            //       $(".box")
            //       .stop(true)
            //       .animate({
            //            left : 200
            //       },1000)
            //       .animate({
            //             top : 200
            //       },1000)
            //       .animate({
            //             left : 0
            //       },1000)
            //       .animate({
            //             top : 100
            //       } , 1000)
            // })

            $("#stop").on("click"  , function(){
                  // 是否清空动画队列; false => 不清空会继续执行;
                  // 是否立即完成当前动画 : false => 不立即完成;
                  // $(".box").stop( false , false ) ;
                  // $(".box").stop( true , false ) ;// √ ;
                  $(".box").stop( true , true ) ;
            })

            // 冷知识 , 同步程序列队;
            $("#btn").click( function(){
                  $(".box")
                  .stop(true)
                  .animate({
                       left : 200
                  },1000)
                  .delay(2000)
                  .animate({
                        top : 200
                  },1000)
                  .animate({
                        left : 0
                  },1000)
                  .animate({
                        top : 100
                  } , 1000)
                  // 列队方法, 这个方法会把内部的函数放到动画队列之中，跟着动画队列执行;
                  .queue(function( next ){
                        // 如果后续还有需要调用的动画队列，必须调用 next;
                        $(this).css({
                              backgroundColor : "#f10"
                        })
                        next();
                  })
                  .animate({
                        width : 200,
                        height : 200
                  })
            })

      </script>
</body>
</html>